import React from 'react'
import { MainLayout, BeforeEach } from '../components'
import { Navigate } from 'react-router-dom'
const Home = React.lazy(() => import('../views/home'))
const Login = React.lazy(() => import('../views/login'))
const ListAdd = React.lazy(() => import('../views/listAdd'))
const ListManage = React.lazy(() => import('../views/listManage'))
const Upload = React.lazy(() => import('../views/upload'))


export interface RouteRawState {
  path: string
  element?: JSX.Element
  meta?: {
    title?: string
    hidden?: boolean
    roles?: string[] 
  },
  children?: RouteRawState[]
}

export const routes: RouteRawState[] = [{
  path: '/home',
  element: <MainLayout>
    <Home></Home>
  </MainLayout>,
  meta:{
    title: '首页'
  }
},{
  path: '/login',
  element: <Login></Login>,
  meta: {
    title: '登录',
    hidden: true
  }
},{
  path: '/list',
  meta: {
    title: '列表操作'
  },
  children: [{
    path: '/list/manage',
    element: <MainLayout>
      <ListManage></ListManage>
    </MainLayout>,
    meta: {
      title: '列表管理',
      roles: ['admin']
    }
  },{
    path: '/list/add',
    element: <MainLayout>
      <ListAdd></ListAdd>
    </MainLayout>,
    meta: {
      title: '列表添加'
    }
  }]
},{
  path: '/',
  element:   <Navigate to="login"></Navigate>,
  meta: {
    hidden: true,
    title: '重定向'
  }
},{
  path: '/upload',
  element:  <MainLayout>
    <Upload></Upload>
  </MainLayout>,
  meta: {
    title: '上传图片'
  }
}]

const handleRoutes = (routes: RouteRawState[]) => {
  routes.forEach(item => {
    if(item.element) {
      item.element = <BeforeEach v={{ ...item }}></BeforeEach>;
      item.children && handleRoutes(item.children)
    }
  })
}

// handleRoutes(routes)